<script lang="tsx">
import { defineComponent, ref, computed } from 'vue'
import { ElButton } from 'element-plus'
import oForm, { oFormProps } from 'oneui/form/factory.vue'
import { oSearch } from 'oneui/index'
import { oList } from 'oneui/index'
import type { iTableOptionsProps } from 'oneui/list/table.vue'
import type { SimpleKeyValueObject } from 'oneui/form/utils'
import dataGithub, { options } from './data'
console.log(dataGithub)
export default defineComponent({
  components: { oForm, oSearch, oList },
  setup(props, context) {
    const headerOptions = computed(() => {
      return {
        title: '会员列表',
        columns: [
          {
            comtype: 'button',
            label: '添加会员',
          },
          {
            comtype: 'button',
            label: '清空洗码量'
          },
          {
            comtype: 'button',
            label: '变更分组'
          },
          {
            comtype: 'button',
            label: '变更代理'
          },
          {
            comtype: 'button',
            label: '发送会员消息'
          },
          {
            comtype: 'button',
            label: '会员消息回复'
          }
        ]
      }
    })
    const searchOptions = computed(() => {
      return {
        columns: [
          {
            prop: 'firstName',
            comtype: 'input',
            label: () => {
              return <span>123</span>
            },
            value: '来了',
            style: 'color:red;',
            require: true,
            requireMsg: '请输入姓名哟！'
          },
          {
            prop: 'birthday',
            comtype: 'datepicker',
            label: () => {
              return <span>生日</span>
            },
            formItemStyle: { width: '400px' },
            value: '来了',
            type: 'daterange'
          },
          {
            prop: 'timestamp',
            comtype: 'time',
            label: () => {
              return <span>时间格式</span>
            },
            value: 1318781876406
          },
          {
            prop: 'mymoney',
            comtype: 'money',
            label: () => {
              return <span>金额格式</span>
            },
            value: 123.3658
          },
          {
            prop: 'mymoney2',
            comtype: 'integer',
            label: () => {
              return <span>整数</span>
            },
            value: 123.3658
          },
          {
            prop: 'tag',
            comtype: 'tag',
            label: () => {
              return <span>整数</span>
            },
            value: [{ text: '胖' }, { text: '搜', type: 'success' }]
          },
          {
            prop: 'mycolor',
            comtype: 'colorpicker',
            label: '颜色'
            // value: '#f00'
          },
          {
            prop: 'mycascader',
            comtype: 'cascader',
            label: '级联选择',
            options: options,
            value: ['guide', 'disciplines', 'consistency']
          },
          {
            prop: 'myswitch',
            comtype: 'switch',
            label: '开关',
            activeText: '开',
            inactiveText: '关',
            value: true
          },
          {
            prop: 'myslider',
            comtype: 'slider',
            label: '声音',
            formItemStyle: { width: '500px' },
            showInput: true
          },
          {
            prop: 'mylink',
            comtype: 'link',
            label: '声音',
            value: '跳转百度'
          },
          {
            prop: 'gender',
            comtype: 'select',
            label: '年龄',
            options: [
              { label: '男', value: 1 },
              { label: '女', value: 2 }
            ],
            value: 1,
            multiple: true,
            // clearable: false,
            requireMsg: '请输入姓名哟！'
          },
          {
            prop: 'gender0',
            comtype: 'select',
            label: '年龄',
            options: [
              { label: '男', value: 1 },
              { label: '女', value: 2 }
            ],
            value: 1
          },
          {
            prop: 'gender1',
            comtype: 'checkbox',
            label: '年龄1',
            options: [
              { label: '男', value: 1 },
              { label: '女', value: 2 }
            ],
            value: '女'
            // clearable: false,
            // requireMsg: '请输入姓名哟！'
          },
          {
            prop: 'gender2',
            comtype: 'radio',
            label: '年龄2',
            options: [
              { label: '男', value: 1 },
              { label: '女', value: 2 }
            ],
            value: '女'
            // clearable: false,
            // requireMsg: '请输入姓名哟！'
          },
          {
            prop: 'lastName',
            comtype: 'input',
            label: '名',
            require: true,
            requireMsg: '请输入姓名哟！'
          },
          {
            prop: 'myupload',
            comtype: 'upload',
            label: '大文件'
          },
          {
            prop: 'avatar_url',
            comtype: 'picture',
            label: '照片',
            center: true,
            visiable: false,
            value: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
            options: [
              'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
              'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
              'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
              'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
              'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
              'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
              'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'
            ]
          },
          {
            comtype: 'br'
          },
          {
            comtype: 'button',
            label: '点击'
          }
        ]
      }
    })
    const tableOptions = computed(() => {
      return {
        columns: [
          {
            prop: 'login',
            label: '账号',
            align: 'center',
            // comtype: 'input',
            type: 'primary',
            copy: true
            // render(row: SimpleKeyValueObject, inProps: SimpleKeyValueObject) {
            //   return <span>123</span>
            // }
          },
          {
            prop: 'id',
            label: '节点',
            width: 400,
            align: 'center',
            // comtype: 'input',
            type: 'primary',
            view: (row: SimpleKeyValueObject) => {
              console.log('view', row)
            },
            edit: (row: SimpleKeyValueObject) => {
              console.log('edit', row)
            }
          },
          {
            prop: 'avatar_url',
            label: '照片',
            width: 400,
            align: 'center',
            comtype: 'picture',
            edit: (row: SimpleKeyValueObject) => {
              console.log('edit', row)
            }
          },
          {
            prop: 'url',
            label: '主页',
            width: 400,
            comtype: 'link',
            value: '好',
            onClick(row: SimpleKeyValueObject) {
              window.open(row.url as string)
            }
          }
        ],
        pageApiPromise: function (param) {
          console.log(param)
          return new Promise((resolve) => {
            resolve({
              total: 1000,
              items: dataGithub.slice(
                (param.currentPage - 1) * param.pageSize,
                param.currentPage * param.pageSize
              )
            })
          })
        }
      } as iTableOptionsProps
    })
    return () => (
      <div>
        {/* <oSearch searchOptions={formOptions} /> */}
        {/* <oForm formOptions={formOptions} /> */}
        <oList
          headerOptions={headerOptions}
          searchOptions={searchOptions}
          tableOptions={tableOptions}
        />
      </div>
    )
  }
})
</script>
<style lang="scss" scoped></style>
